<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .testClass{
            color: red;
        }
    </style>
</head>
<body>
    <p id="demo"><a></a>点击按钮创建button元素</p>
    <button onclick="createButtonElement()">点我</button>
</body>
<script>
    function createButtonElement(){   //创建button元素节点
        var demo = document.getElementById("demo");
        // var btn = document.createElement("BUTTON"); //创建元素
        // demo.appendChild(btn); //在指定元素末尾添加
        // demo.insertBefore(btn,demo.childNodes[0]);//在指定元素前面添加一个节点
        // var text=document.createTextNode("Hi");//对于文档节点进行文本节点创建
        // demo.appendChild(text);
        var classStyle=document.createAttribute("class");//添加属性节点
        classStyle.value="testClass";//添加创建好的属性的值
        demo.setAttributeNode(classStyle);//将新创建的属性添加至元素节点
        console.log(demo.getAttributeNode("class") + "<br>");//返回指定名称的属性节点
        demo.removeAttributeNode("class");
        demo.setAttributeNode(classStyle);
        demo.removeAttributeNode(demo.getAttributeNode("class"));

    }
</script>
<html>